<template>
  <div>
    <!--    面包屑导航区-->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>消息管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-tabs type="card" v-model="selectTab" @tab-click="handleTabClick">
        <el-tab-pane label="全部" name="-1"></el-tab-pane>
        <el-tab-pane label="待审核" name="0"></el-tab-pane>
        <el-tab-pane label="审核通过" name="1"></el-tab-pane>
        <el-tab-pane label="审核未通过" name="2"></el-tab-pane>
      </el-tabs>
      <ul style="padding: 0;" class="comment-list">
        <li class="comment" v-for="(item,index) in list" :key="index">
          <el-avatar :src="item.avatar"></el-avatar>
          <div class="content">
            <div style="display: flex;justify-content: space-between;width: 100%">
              <div class="nkname">
                <span class="name">{{ item.nickname }} </span>
                <span class="date">{{ item.createTime | dateFormat3 }}</span>
                <span class="margin-left-sm">
                  <el-tag v-if="item.status==0" size="small">待审核</el-tag>
                  <el-tag type="success" v-if="item.status==1" size="small">审核通过</el-tag>
                  <el-tag type="info" v-if="item.status==2" size="small">审核未通过</el-tag>
                </span>
              </div>
              <div class="op">
                <el-dropdown size="small" @command="handleCommand(item,$event)" class="margin-right-sm">
                  <el-button type="primary" size="small">
                    审核
                    <i class="el-icon-arrow-down el-icon--right"></i>
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="1">审核通过</el-dropdown-item>
                    <el-dropdown-item command="2">审核未通过</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                <span class="del" @click="handleDel(item.id)">删除</span>
              </div>
            </div>
            <p class="reply">{{ item.content }}</p>
          </div>
        </li>
      </ul>
      <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-size="queryParams.pageSize"
          :current-page="queryParams.pageNum"
          :total="total">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import {
  reqCommentList,
  reqDelComment,
  reqDelMessage,
  reqMessageList,
  reqUpdateCommentStatus, reqUpdateMessageStatus
} from '../../api/adminApi'

const defQuery = () => {
  return {
    kwd: '',
    status:"",
    pageNum: 1,
    pageSize: 10
  }
}
export default {
  data() {
    return {
      editing: false,
      queryParams: defQuery(),
      list: [],
      total: 0,
      selectTab:'-1'
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 获取评论列表
    getList() {
      reqMessageList(this.queryParams).then(data => {
        this.list = data.list
        this.total = data.total
      })
    },
    // 删除评论
    handleDel(id) {
      // 弹出对话框
      this.$confirm(
          '此操作将永久删除该评论, 是否继续',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
      ).then(() => {
        reqDelMessage(id).then(data => {
          this.getList()
          this.$message.success('删除成功！')
        })
      })
    },
    handleCommand(item, command) {
      reqUpdateMessageStatus({ status: command, id: item.id }).then(data => {
        this.$message.success("审核状态变更成功");
        this.getList()
      })
    },
    handleTabClick(tab, event){
      console.log(tab.name)
      this.queryParams.status=tab.name==-1?'':tab.name
      this.getList()
    },
    // 跳转到博客详情页
    go2BlogDetail(blogId) {
      this.$router.push({ path: '/blogInfo', query: { id: blogId } });
    },
    handleCurrentChange(pageNum) {
      this.queryParams.pageNum = pageNum
      this.getList()
    },
    handleSizeChange(pageSize) {
      this.queryParams.pageSize = pageSize
      this.getList()
    },
  }
}
</script>

<style scoped lang="less">
.comment {
  border-bottom: 1px dashed #ccc;
  margin: 10px 0;
  display: flex;
}

.el-avatar {
  width: 35px;
  height: 35px;
  border: 2px solid white;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, .06);
  flex-shrink: 0;
}

.content {
  text-align: left;
  font-size: 14px;
  flex-grow: 1;

  .nkname {
    margin-left: 10px;
    max-width: 530px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    .rp, .date {
      color: #999;
      margin-left: 10px;
    }

    .blog {
      color: #349edf;
      margin-left: 10px;
      cursor: pointer;
    }
  }

  .reply {
    margin-left: 10px;
  }

  .op {
    color: #ddd;
    font-weight: lighter;

    .rep {
      color: #349edf;
    }

    .del {
      color: red;
    }
  }

  .op:hover {
    cursor: pointer;
  }
}

</style>
